<template>
	<view>
		<view style="width: 750rpx;height: 714rpx;position: relative;">
			<image :src="cancelImg" style="position: absolute;top: 30rpx; left: 670rpx;width: 50rpx;height: 50rpx;" @tap="cancelFun"></image>
			<view style="display: flex;width: cala(100vw * 0.92);align-items: center;position: absolute;top: 5rpx;margin-left: calc(100vw * 0.04);top: 20rpx;">
				<view :class="checkData ? 'oLdCla_' : 'oLdCla'" @tap="nocheckFun">
					以后再选
				</view>
				<view :class="addData ? 'oLdCladd_' : 'oLdCladd'" style="margin-left: 32rpx;" @tap="addoneFun">
					加100，加一科
				</view>
			</view>
			<scroll-view scroll-y="true" style="height: 450rpx;position: absolute;left: 45rpx;top: 100rpx;">
				<view style="display: flex;flex-wrap: wrap;">
					<view v-for="(itme,index) in arr" :key="index" :class="itme.list ? 'content' : 'content_l' " @tap="choiceFun(itme)">{{itme.title}}</view>
				</view>
			</scroll-view>
			<view style="position: absolute;top: 570rpx;left: 30rpx;">
				<button type="primary" style="background: rgba(255, 117, 1, 1);border-radius: 40rpx;width: 690rpx;" @tap="purchaseCurr">{{numderData}}立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	export  default {
		
		props:{
			shareId: String
		},
		
		data() {
			return {
				arr: [],
				electData: [],
				checkData: false,
				addData: false,
				numderData: 298
			}
		},
		
		methods: {
			
			// 隐藏弹出框函数  向父元素传参  不可以在子元素里面修改父元素的值
			cancelFun() {
				this.electData = []
				this.$emit("hideFun",false)
			},
			
			
			choiceFun(itm) {
				let everyResult = this.electData.some((item) => {
					return item.id == itm.id
				})
				if(!everyResult) {
					this.electData.push(itm)
				}else {
					this.electData.forEach((itme,index) => {
						if(itme.id == itm.id) {
							this.electData.splice(index,1)
						}
					})
				}
				
				if(this.addData) {
					if(this.electData.length > 3) {
						this.electData.splice(0,1)
					}
				}else {
					if(this.electData.length > 2) {
						this.electData.splice(0,1)
					}
				}
				
				this.arr.forEach((itme) => {
					itme.list = false
				})
				this.arr.forEach((itme) => {
					if(this.electData.length !== 0) {
						this.electData.forEach((ite) => {
							if(itme.id == ite.id) {
								itme.list = true
							}
						})
					}
				})
			},
			
			curriculumList() {
				this.$myRequest({
					url: "/masterSetPrice/queryListPage",
					data: {
						type: "double_science_Activity",
						pageSize: 10,
						currentPage: 1
					}
				}).then((res) => {
					this.arr = res.data
				})
			},
			
			nocheckFun() {
				this.checkData = !this.checkData
				if(this.checkData) {
					uni.showToast({
						title: "报名后，可到我的>>优学卡选课",
						icon: "none",
						duration: 3000
					})
				}
			},
			
			
			// 加一百加一颗
			addoneFun() {
				this.addData = !this.addData
				if(this.addData) {
					this.numderData = 398
				}else {
					this.numderData = 298
					if(this.electData.length == 3) {
						this.electData.splice(0,1)
						this.arr.forEach((itme) => {
							itme.list = false
						})
						this.arr.forEach((itme) => {
							if(this.electData.length !== 0) {
								this.electData.forEach((ite) => {
									if(itme.id == ite.id) {
										itme.list = true
									}
								})
							}
						})
					}
				}
			},
			
			// 购买优学卡
			purchaseCurr() {
				if(this.user_id === "") {
					uni.navigateTo({
						url: "/pages/tabBer/login/logins?excellent=" + this.shareId
					})
				}else {
					if(this.electData.length == 2) {
						let b = []
						this.electData.forEach((itt) => {
							b.push(itt.id)
						})
						let me = this
						uni.login({
							success: (res) => {
								me.$myRequest({
									url: "/pay/payPre",
									methed: "post",
									header: {
										'content-type' : 'application/json'
									},
									data: {
										user_id: me.user_id,
										rcharge_type: "coupon_198",
										source: "teach_paypal",
										rcharge_abstract: "微信小程序优学卡购买",
										pay_type: "wx",
										rcharge_valid: res.code,
										selected_id: b.toString(),
										invite_code:  this.shareId
									}
								}).then((val) => {
									if(val.code == 0){
										let data = val.data
										uni.requestPayment({
										    timeStamp: data.timeStamp,
										    nonceStr: data.nonceStr,
										    package: data.package,
										    signType: 'MD5',
										    paySign: data. paySign,
										    success: function (res) {
										        uni.showToast({
										        	title: "支付成功,请勿重复购买",
													icon: "none",
													duration: 3000
										        })
												me.canShow = false
												uni.reLaunch({
													url: "/pages/Other/DetailsCurriculum/DetailsCurriculum"
												})
										    },
										    fail: function (err) {
										        uni.showToast({
										        	title: "取消支付",
													icon: "none"
										        })
										    }
										});
									}
								})
							}
						})
					}else {
						uni.showToast({
							title: "最少选择两节课程",
							icon: "none",
							duration: 3000
						})
					}
				}
			},
		},
		
		created() {
			this.curriculumList()
			try{
				this.user_id = uni.getStorageSync('userif_list').user_id
			}catch(e){}
		}
	}
</script>
<style scoped lang="scss">
	.oLdCla {
		width: 280rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #F6F6F6;
		color: #666666;
		font-size: 28rpx;
		border-radius: 10rpx;
	}
	.oLdCla_ {
		width: 280rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #FF7501;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 10rpx;
	}
	.oLdCladd {
		width: 280rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #F6F6F6;
		color: #666666;
		font-size: 28rpx;
		border-radius: 32rpx;
	}
	.oLdCladd_ {
		width: 280rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		background: #FF7501;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 32rpx;
	}
	.content {
		border: 1rpx solid rgba(255, 117, 1, 1);
		width: 200rpx;
		height: 64rpx;
		margin:46rpx 30rpx 0 0;
		border-radius: 10rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: 30rpx;
		color: rgba(255, 117, 1, 1);
	}
	.content_l {
		border: 1rpx solid rgba(246, 246, 246, 1);
		width: 200rpx;
		height: 64rpx;
		margin:46rpx 30rpx 0 0;
		border-radius: 10rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: 30rpx;
		color: rgba(102, 102, 102, 1);
		background: rgba(246, 246, 246, 1);
	}
</style>


